<%@include  file="/WEB-INF/header2.jsp"%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%> 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>说说</title>
<style>
* {
	margin: 0px;
	padding: 0px;
}

#qq {
	width: 840px; /*宽*/
	height: 170px; /*高*/
	background: #fff; /*背景颜色*/
	margin: 0px auto 30px;
	border-radius: 5px; /*Html5 圆角*/
}

#qq p {
	font-size: 12px;
	color: #666;
	font-family: "微软雅黑";
	line-height: 45px;
	text-indent: 20px;
}

#qq .message {
	width: 760px;
	height: 70px;
	margin: 0px auto;
	outline: none;
	border: 1px solid #ddd; /*粗细 风格 颜色*/
	overflow:auto
}

#qq .But {
	width: 760px;
	height: 35px;
	margin: 15px auto 0px;
	position: relative; /*相对，参考对象*/
}

#qq .But img.bq {
	float: left; /*左浮动*/
}

#qq .But span .submit {
	width: 80px;
	height: 30px;
	background: #ff8140;
	display: block;
	float: right; /*右浮动*/
	line-height: 30px;
	border-radius: 5px;
	cursor: pointer; /*手指*/
	color: #fff;
	font-size: 12px;
	text-align: center;
	font-family: "微软雅黑";
}

/*face begin*/
#qq .But .face {
	width: 390px;
	height: 160px;
	background: #fff;
	padding: 10px;
	border: 1px solid #ddd;
	box-shadow: 2px 2px 3px #666;
	position: absolute; /*绝对定位*/
	top: 21px;
	left: 15px;
	display: none; /*隐藏*/
}

#qq .But .face ul li {
	width: 22px;
	height: 22px;
	list-style-type: none; /*去掉圆点*/
	float: left;
	margin: 2px;
	cursor: pointer;
}

/*msgCon begin*/
.msgCon {
	width: 840px;
	height: 500px;
	margin: 0px auto;
}

.msgCon .msgBox {
	background: #fff;
	padding: 10px;
	margin-top: 20px;
}

.msgCon .msgBox dl {
	height: 60px;
	border-bottom: 1px dotted #ddd;
}

.msgCon .msgBox dl dt {
	width: 50px;
	height: 50px;
	float: left;
}

.msgCon .msgBox dl dt img {
	border-radius: 25px;
}

.msgCon .msgBox dl dd {
	width: 720px;
	height: 50px;
	line-height: 50px;
	float: right;
	font-size: 16px;
	font-family: "微软雅黑";
}

.msgCon .msgBox .msgTxt {
	font-size: 12px;
	color: #666;
	line-height: 25px;
}

      .test1{
			width: 800px;
			margin: 50px auto;
		}
		
		
		.test2{
			position: absolute;
			top: 340px;
			text-align: center;
		}
		
		
		.test2 li{
			width: 30px;
			height: 5px;
			border: 1px solid transparent;
			background-color: #717171;
			border-radius: 2px;
			
		}
		
		.test2 .active{
			width: 30px;
			height: 5px;
			border: 1px solid transparent;
			background-color:#fff;
			border-radius: 2px;
		
		}

			 #a td{
                line-height: 50px;
                font-size: 20px;
            }

            #a tr:hover{
                background:#D4E3E5;
            }
            table th,td {
    vertical-align: middle!important;
    text-align: center;
}
            

</style>
</head>
<body>
<div id="page-wrapper">
	<div class="container">
		<table id="table_page" class="table table-hover table-bordered" >
			<tr><th>序号</th><th>用户头像</th><th>说说内容</th><th>发布时间</th><th>用户id</th></tr>
			<c:forEach items="${circle}" var="circle" varStatus="status">
			<tr>
				<td>${status.count }</td>
				<td><img class="img-circle" data-toggle="modal" data-target="#myModal2" style="width: 122px;height:122px;" src="${circle.circle_photo }"></td>
				<td>${circle.circle_dynamic }</td>
				<td>${circle.circle_time }</td>
				<td>${circle.user_id}</td>
			</tr>
			</c:forEach>
		</table>
	</div>
</div>
	<script type="text/javascript" src="../js/jquery.js"></script>
	<script type="text/javascript">

</script>
</body>
</html>
 <%@include  file="/WEB-INF/footer.jsp"%>